<template>
  <div>
    <el-card v-for="order in orderArr" class="box-card">
      <div slot="header" class="clearfix">
        <span>{{order.kindsId}}</span>
        <span style="float: right">已完成</span>
      </div>
      <div>
        <el-row>
         <el-col :span="3">
           <div>
             <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="50"></el-avatar>
           </div>
         </el-col>
          <el-col :span="10">
            <span>用户ID：{{order.userId}}</span><br>
            <span>订单状态：{{order.state}}</span><br>
            <span>总价：{{ order.amount }}</span>
          </el-col>
          <el-col :span="11">
            <span>预约时间：{{order.appointmentTime}}</span><br>
            <span>创建时间：{{order.created}}</span><br>
            <span>完成时间：{{order.finish}}</span>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <div>
          <el-button>更多</el-button>
          <el-button style="float: right" @click="viewComment()">查看评论</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "WorkerViewOrder",
  data(){
    return{
      orderArr:[{userId:"1",state:"已完成",amount:"564.0",appointmentTime:"2023-04-21 16:21:51",created:"2023-04-21 16:22:01",finish:"2023-04-16 18:15:14"},
                {userId:"2",state:"已完成",amount:"647.0",appointmentTime:"2023-04-22 18:37:21",created:"2023-04-22 18:37:24",finish:"2023-04-26 18:50:32"}]

    }
  },
  methods:{
    loadOrderAll(){
      let url = 'http://localhost:9081/orders'
      console.log("url = " + url);

      this.axios.get(url).then((response) => {
        this.responseBody = response.data;
        this.orderArr = this.responseBody;
      })
    },
    viewComment(){

    }
  },
  method(){
    this.loadOrderAll()
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  margin-bottom: 10px;
}
</style>